<template>
  <div id="navmenu" class="container">
    <el-tabs v-model="activeName" class="tabs tab-card" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in langList" :key="item.id" :label="item.lang" :name="item.lang" />
    </el-tabs>
    <div class="center">
      <div class="navcate">
        <ul class="leftNavcate">
          <li class="nav-top">
            {{ $t('导航列表') }}
            <i class="el-icon-plus" @click="addNav"></i>
          </li>
          <li v-for="item in navList" :key="item.id" :class="activeId == item.id ? 'activeitem' : ''">
            <span class="nav-title" @click="changenav(item.id)">
              {{ item.id }}-{{ item.title }}
            </span>
            <div class="icon">
              <i class="el-icon-delete" @click="delenav(item)" />
              <i class="el-icon-edit" @click="editnav(item)" />
            </div>
          </li>
        </ul>
        <div class="right-menu">
          <el-button type="primary" icon="el-icon-plus" class="add-fmenu" @click="addFmenu">
            {{ $t('添加菜单') }}
          </el-button>
          <el-table ref="refTable" :data="menuData" row-key="id" :header-cell-style="{
            'text-align': 'center',
            'background-color': '#f5f5f5'
          }" :cell-style="{ 'text-align': 'center' }" @row-click="expandChange">
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column :label="$t('菜单名称')" prop="title" />
            <el-table-column :label="$t('状态')" prop="status" width="140px">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
                  :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)"
                  inactive-color="rgba(0,0,0,0.2)" @change="disableUser(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('排序')" prop="sort" />
            <el-table-column :label="$t('操作')" fixed="right" width="250px">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-plus" @click="addCmenu(scope.row)"></el-button>
                <EditBtn @click="edit(scope.row)" />
                <DelBtn @success="del(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <BaseDialog :title="addForm2.id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow2" width="50%" @submit="submit2"
      footer>
      <el-form ref="addForm2" :model="addForm2" :rules="rules2" class="addForm" label-position="top">
        <el-form-item :label="$t('名称')" prop="title">
          <el-input v-model="addForm2.title" />
        </el-form-item>
        <el-form-item :label="$t('描述')">
          <el-input v-model="addForm2.description" type="textarea" />
        </el-form-item>
      </el-form>
    </BaseDialog>
    <BaseDialog :title="id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" footer @submit="submit">
      <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-position="top">
        <el-form-item :label="$t('菜单类别')" prop="type">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="1">{{ $t('普通') }}</el-radio>

            <el-radio :label="2">{{ $t('关联栏目') }}</el-radio>
            <el-input v-if="addForm.type == 1" v-model="addForm.href" :placeholder="$t('请输入菜单地址')" class="type" />
            <el-select v-if="addForm.type == 2" v-model="addForm.category_id" class="type" @change="chooseColumn"
              :placeholder="$t('请选择关联栏目')">
              <el-option-group v-for="group in columnData" :key="group.id" :label="group.title">
                <el-option v-for="item in group.category" :key="item.id" :label="item.title" :value="item.id"
                  :disabled="item.disable" />
              </el-option-group>
            </el-select>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('名称')" prop="title">
          <el-input v-model="addForm.title" />
        </el-form-item>
        <el-form-item :label="$t('菜单状态')" prop="status">
          <el-select v-model="addForm.status">
            <el-option :label="$t('显示')" :value="1" />
            <el-option :label="$t('隐藏')" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('排序')" prop="sort">
          <el-input v-model="addForm.sort" />
        </el-form-item>
        <el-form-item :label="$t('打开方式')">
          <el-select v-model="addForm.target">
            <el-option :label="$t('本页面打开')" value="_self" />
            <el-option :label="$t('新窗口打开')" value="_blank" />
          </el-select>
        </el-form-item>
        <el-form-item label="Nofollow">
          <el-select v-model="addForm.no_follow">
            <el-option :label="$t('添加')" :value="1" />
            <el-option :label="$t('不添加')" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import navApi from '@/api/nav.js'
import langApi from '@/api/websetting'
import moduleApi from '@/api/module'
export default {
  data() {
    return {
      options: [], // 站点列表
      navList: '', // 导航列表
      siteId: '',
      searchForm: {
        website_id: '',
        cate_id: ''
      },
      menuData: [], // 菜单列表
      columnData: [], // 栏目列表
      addForm: {},
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入菜单名称'),
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: 'true',
            message: this.$t('请选择菜单状态'),
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: 'true',
            message: this.$t('请输入菜单排序'),
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: 'true',
            message: this.$t('请选择菜单类别'),
            trigger: 'blur'
          }
        ]
      },
      dialogShow: false,
      dialogShow2: false, // 导航分类弹窗
      addForm2: {}, // 导航表单
      rules2: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入导航名称'),
            trigger: 'blur'
          }
        ]
      },
      id: '', // 菜单id
      navid: '', // 导航id
      langList: [],
      activeName: '',
      lang: '',
      category_id: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.searchForm.website_id = val
      this.getWebLang()
    }
  },
  created() {
    // this.getWebsite()
    this.siteId = this.$store.getters.siteId
    this.searchForm.website_id = this.$store.getters.siteId
    if (this.siteId) {
      this.getWebLang()
    }
  },

  methods: {
    // 切换关联栏目
    chooseColumn(val, value) {
      // 截取中文 复制给名称
      this.columnData.forEach(el => {
        var selectName = el.category.find(el => el.id == val).title
        if (selectName.substring(0, 2) == '--') {
          this.addForm.title = selectName.substring(
            selectName.lastIndexOf('-') + 1
          )
        } else {
          this.addForm.title = selectName
        }
        return
      })
    },
    // 站点语言列表
    getWebLang() {
      langApi.langInfo({ site_id: this.searchForm.website_id }).then(res => {
        this.langList = res.data

        this.lang = res.data[0].lang
        this.activeName = res.data[0].lang
        this.getNavcate()
      })
    },
    // tab切换
    handleClick(val, value) {
      this.activeName = val.name
      this.lang = val.label
      // this.type = val.index
      // this.getList()
      this.getNavcate()
      this.getNav()
    },
    // 更改状态
    disableUser(row) {
      const val = {
        id: row.id,
        parent_id: row.parent_id,
        website_id: row.website_id,
        nav_cate_id: row.nav_cate_id,
        title: row.title,
        status: row.status,
        href: row.href,
        sort: row.sort,
        type: row.type,
        target: row.target,
        category_id: row.category_id,
        lang: this.lang,
        no_follow: row.no_follow
      }

      navApi.navUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    // 新增导航
    addNav() {
      this.addForm2 = {
        title: '',
        id: '',
        description: '',
        lang: this.lang
      }
      this.dialogShow2 = true
    },
    // 编辑导航
    editnav(row) {
      this.addForm2 = {
        title: row.title,
        id: row.id,
        description: row.description,
        lang: this.lang
      }
      this.dialogShow2 = true
    },
    // 删除导航
    delenav(row) {
      this.$confirm(this.$t('是否删除导航'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          const val = {
            id: row.id,
            website_id: row.website_id
          }
          navApi.navCateDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getNavcate()
            }
          })
        })
        .catch(() => { })
    },
    // 提交添加、修改导航
    submit2() {
      this.$refs.addForm2.validate(valid => {
        if (valid) {
          if (!this.addForm2.id) {
            const val = {
              title: this.addForm2.title,
              description: this.addForm2.description,
              website_id: this.searchForm.website_id,
              lang: this.lang
            }
            navApi.navCateSave(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getNavcate()
              }
            })
          } else {
            const val = {
              id: this.addForm2.id,
              title: this.addForm2.title,
              description: this.addForm2.description,
              website_id: this.searchForm.website_id,
              lang: this.lang
            }
            navApi.navCateUpdate(val).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow2 = false
                this.getNavcate()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 栏目列表
    getColumnlist() {
      moduleApi
        .getModuleCate({
          site_id: [this.searchForm.website_id],
          lang: this.activeName
        })
        .then(res => {
          this.columnData = res.data
          // this.getTreeData(res.data)
        })
    },
    // 切换栏目
    changeColumn(val) {
      this.addForm.category_id = val[val.length - 1]
    },
    // 递归获取到columnData的数据
    getTreeData(data) {
      const columnArry = []
      for (var i = 0; i < data.length; i++) {
        if (data[i].status == 1) {
          columnArry.push({
            id: data[i].id,
            title: data[i].title,
            parent_id: data[i].parent_id,
            disable: false
          })
        } else {
          columnArry.push({
            id: data[i].id,
            title: data[i].title,
            parent_id: data[i].parent_id,
            disable: true
          })
        }
        if (data[i].children.length > 0) {
          for (var x = 0; x < data[i].children.length; x++) {
            columnArry.push({
              id: data[i].children[x].id,
              title: data[i].children[x].title,
              parent_id: data[i].children[x].parent_id
            })
          }
        }
      }
      // 给parent_id!=0 的选项的title前加个标识
      columnArry.forEach(el => {
        if (el.parent_id != 0) {
          this.$set(el, 'title', ' --- ' + el.title)
        }
      })
      this.columnData = columnArry
    },
    // 添加主菜单
    addFmenu() {
      this.id = ''
      this.addForm = {
        parent_id: 0,
        website_id: this.searchForm.website_id,
        nav_cate_id: this.searchForm.cate_id,
        title: '',
        status: 1,
        href: '',
        sort: '',
        type: 1,
        target: '_blank',
        category_id: '',
        lang: this.lang,
        no_follow: 2
      }
      this.getColumnlist()
      this.dialogShow = true
    },
    // 添加子菜单
    addCmenu(row) {
      this.id = ''
      this.addForm = {
        parent_id: row.id,
        website_id: this.searchForm.website_id,
        nav_cate_id: this.searchForm.cate_id,
        title: '',
        status: 1,
        href: '',
        sort: '',
        type: 1,
        target: '_blank',
        category_id: '',
        lang: this.lang,
        no_follow: 2
      }
      this.getColumnlist()
      this.dialogShow = true
    },
    // 编辑菜单
    edit(row) {
      this.getColumnlist()
      this.id = row.id
      this.addForm = {
        id: row.id,
        parent_id: row.parent_id,
        website_id: row.website_id,
        nav_cate_id: row.nav_cate_id,
        title: row.title,
        status: row.status,
        href: row.href,
        sort: row.sort,
        type: row.type,
        target: row.target,
        category_id: row.category_id,
        lang: row.lang,
        no_follow: row.no_follow
      }
      this.dialogShow = true
    },
    // 提交添加、修改菜单
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            navApi.navSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getNav()
              }
            })
          } else {
            navApi.navUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getNav()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除菜单
    del(row) {
      this.$confirm(this.$t('是否删除菜单'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          const val = {
            id: row.id,
            website_id: row.website_id,
            cate_id: row.category_id
          }
          navApi.navDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getNav()
            }
          })
        })
        .catch(() => { })
    },
    // 展开折叠
    expandChange(row, index, e) {
      this.$refs.refTable.toggleRowExpansion(row)
    },
    // 左侧导航分类列表
    getNavcate() {
      navApi
        .navCateList({ website_id: this.siteId, lang: this.lang })
        .then(res => {
          if (res.code == 0) {
            this.navList = res.data
            if (res.data.length > 0) {
              console.log(res.data)
              this.searchForm.cate_id = res.data[0].id
              // this.getNav(this.searchForm.website_id)// 分类列表读取完毕 读取导航
              this.changenav(this.searchForm.cate_id)
            }
          }
        })
    },
    changenav(id) {
      this.searchForm.cate_id = id
      this.activeId = id
      this.getNav()
    },
    // 菜单列表
    getNav() {
      const val = {
        website_id: this.siteId,
        cate_id: this.searchForm.cate_id,
        lang: this.lang
      }
      navApi.navList(val).then(res => {
        this.menuData = res.data
      })
    }
  }
}
</script>
<style lang="scss">
#navmenu {
  .tab-card.el-tabs--card .el-tabs__content {
    padding-top: 0px;
  }
}
</style>
<style scoped lang="scss">
.el-button {
  ::v-deep {
    .el-icon-plus {
      font-weight: bold;
    }
  }
}

.addForm {

  .el-select,
  .el-radio-group {
    width: 100%;
  }

  .el-input.type,
  .el-select.type {
    width: 100%;
    margin-top: 8px;
  }
}

.center {
  background-color: #fff;
  border-top: none;

  .navcate {
    display: flex;
    justify-content: left;
  }
}

.leftNavcate {
  list-style: none;
  margin-top: 16px;

  li.nav-top {
    font-size: 14px;
    font-family: PingFang-SC;
    font-weight: bold;

    line-height: 20px;
    display: flex;
    align-items: center;

    .el-icon-plus {
      background-color: var(--huocms-com-color-primary);
      border-radius: 50%;
      color: #fff;
      font-weight: bold;
      padding: 2px;
      cursor: pointer;
    }
  }

  li {
    width: 220px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .nav-title {
      cursor: pointer;
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .icon {
      display: none;

      i {
        cursor: pointer;
      }

      .el-icon-delete {
        margin-right: 10px;
      }
    }
  }

  .activeitem .icon {
    display: block;
  }

  // hover的样式
  li:hover {
    color: var(--huocms-com-color-primary);
    background-color: #f4f8fc;

    .icon {
      display: block;
    }
  }

  //选中的样式
  li.activeitem {
    color: var(--huocms-com-color-primary);
    background-color: #f4f8fc;
  }
}

.right-menu {
  -webkit-box-flex: 3;
  box-flex: 3;
  padding-top: 20px;
  padding-left: 15px;
  border-left: solid 1px #eee;
  width: calc(100% - 220px);

  .add-fmenu {
    margin-bottom: 16px;
  }
}

.addCmenu {
  color: #fff;
  background-color: #fe872b;
  border-color: #edeef3;
  border-radius: 16px;
}
</style>
